<template>
  <div v-if="visible && finalSrc" class="webview">
    <iframe
      class="iframe"
      :src="finalSrc"
      frameborder="”no”"
      border="”0″"
      marginwidth="”0″"
      marginheight="”0″"
      scrolling="”no”"
      allowtransparency="”yes”"
    ></iframe>
    <close-icon v-if="closable" class="close-icon" @click="hide" />
  </div>
</template>

<script>
import CloseIcon from "@/common/close-icon/index.vue";

export default {
  components: {
    CloseIcon,
  },
  props: {
    src: {
      type: String,
      default: "",
    },
    closable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      url: "",
      visible: true,
    };
  },
  computed: {
    finalSrc() {
      return this.url || this.src;
    },
  },
  methods: {
    show(url) {
      this.visible = true;
      this.url = url;
    },
    hide() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.webview,
.iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: #000;
}
.close-icon {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 10001;
}
</style>